<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大屏</title>
    <!-- 引入初始化样式START -->
    <link href="./css/base.css" rel="stylesheet">
    <!-- 引入初始化样式END -->
    <!-- 引入主页样式START -->
    <link href="./css/index.css" rel="stylesheet">
    <!-- 引入主页样式END -->
    <!-- 引入Echarts -->
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <!-- 引入Jquery -->
    <script src="./js/jquery.js"></script>
    <!-- 引入Bootstrap -->
    <link href="./bootstrap4/css/bootstrap-grid.css.map" rel="stylesheet">
    <script src="./bootstrap4/js/bootstrap.min.js"></script>
    <!-- 百度地图AK -->
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=1BH48x8rMf48kpfzK0HO2EjKYGTKxxtu"></script>
    <!-- 百度地图依赖 -->
    <script src="./bdmap/mapv.min.js"></script>
    <script src="./bdmap/mapvgl.min.js"></script>
    <script src="./bdmap/common.js"></script>
    <!-- 引入测试数据 -->
    <script src="./data/reli.js"></script>
</head>
<body>
    <!-- 头部START -->
    <header>
        <h1>
            <a href="#" style="color: white;">人员库分析</a>
        </h1>
    </header>
    <!-- 头部END -->
    <!-- 主题内容START -->
    <main>
        <ul>
            <li class="left">
                <div class="echartsBox">
                    <div class="echartsBox_title">标题</div>
                    <div id="echartsBox"></div>
                    <div class="echartsBox_buttom_border"></div>
                </div>
                <div class="echartsBox">
                    <div class="echartsBox_title">标题</div>
                    <div id="echartsBox"></div>
                    <div class="echartsBox_buttom_border"></div>
                </div>
                <div class="echartsBox">
                    <div class="echartsBox_title">标题</div>
                    <div id="echartsBox"></div>
                    <div class="echartsBox_buttom_border"></div>
                </div>
            </li>
            <li class="middle">
                <div class="Middle_TOP_Box"></div>
                <div class="Middle_MAP_Box" id="map_container"></div>
            </li>
            <li right="right">
                <div class="echartsBox">
                    <div class="echartsBox_title">标题</div>
                    <div id="echartsBox"></div>
                    <div class="echartsBox_buttom_border"></div>
                </div>
                <div class="echartsBox">
                    <div class="echartsBox_title">标题</div>
                    <div id="echartsBox"></div>
                    <div class="echartsBox_buttom_border"></div>
                </div>
                <div class="echartsBox">
                    <div class="echartsBox_title">标题</div>
                    <div id="echartsBox"></div>
                    <div class="echartsBox_buttom_border"></div>
                </div>
            </li>
        </ul>
    </main>
    <!-- 主题内容END -->
    <script>
        window.onload = function(){
            echarts1()
        }
        /*Echarts*/
        function echarts1(){
            let myChart = echarts.init(document.querySelectorAll('#echartsBox')[0]);

            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
                },
                grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
                },
                xAxis: [{
                type: 'category',
                data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
                axisLine: {
                    show: true,
                    lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 1,
                    type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                    },
                },
                }],
                yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                    color: "rgba(255,255,255,.1	)",
                    width: 1,
                    type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    }
                }
                }],
                series: [
                {
                    type: 'bar',
                    data: [200, 300, 300, 900, 1500, 1200, 600],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                    normal: {
                        color: '#2f89cf',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                    }
                }

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // echarts自适应
            window.addEventListener("resize", function () {
                myChart.resize(); 
            });
        }
        /*Echarts*/
    </script>
    <!-- 引入自动转换rem插件START -->
    <script src="./js/flexible.js"></script>
    <!-- 引入自动转换rem插件END -->
    <script>
        // 6322,2363
    
        /* global BMapGL */
    
        /* global mapv */
    
        /* global mapvgl */
    
        /* global initMap */
        var map = initMap();
    
        var point = new BMapGL.Point(116.387456,39.925406);
        map.centerAndZoom(point, 12);
    
        var view = new mapvgl.View({
            map: map
        });
        console.log('热力数据(windows对象)',window.rldata.result.data[0].bound)
        // fetch('https://mapv.baidu.com/gl/examples/static/beijing.07102610.json').then(rs => {
        //     return rs.json();
        // }).then(rs => {
            // rs = rs.result.data[0].bound;
            let rs = window.rldata.result.data[0].bound
            var data = [];
            for (var i = 0; i < rs.length; i++) {
                var item = rs[i];
                data.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [item[0], item[1]]
                    },
                    properties: {
                        count: item[2]
                    }
                });
            }
            var heatmap = new mapvgl.HeatmapLayer({
                size: 600, // 单个点绘制大小
                max: 40, // 最大阈值
                height: 0, // 最大高度，默认为0
                unit: 'm', // 单位，m:米，px: 像素
                gradient: { // 对应比例渐变色
                    0.25: 'rgba(0, 0, 255, 1)',
                    0.55: 'rgba(0, 255, 0, 1)',
                    0.85: 'rgba(255, 255, 0, 1)',
                    1: 'rgba(255, 0, 0, 1)'
                }
            });
            view.addLayer(heatmap);
            heatmap.setData(data);
        // });
    </script>
</body>
</html>